$(function () {
	console.log("The Mr.Green has a color but not always green");

	const SIZE = {rows:6,cols:4};//program file size
	const classNames = ['current','red','green','blue','black'];//div's background-color
	const PX = 80;//each side of div's length

	var datas = [];//program data
	var divs = [];//program div
	var timer;// program timer
	var cover;//for mark current block

	/**
	 * print the mutil-array
	 * @return {[type]} [description]
	 */
	var letsRollOut = function(m,n){
		var rows = SIZE.rows;
		var cols = SIZE.cols;
		// for (var i = 0; i < rows; i++) {
		// 	for (var j = 0; j < cols; j++) { 
		// 		datas[i][j].curr = false;
		// 	}
		// } 
		// console.log(datas[m][n]);
		// datas[m][n].curr = true;
		// divs[m][n].className = "current"
		document.getElementById("current").style.top = (m*PX)+"px";
		document.getElementById("current").style.left = (n*PX)+"px";
	}

	var i = 0,j = 0;
	var letsDivRun = function(){  
		if(j>=SIZE.cols){
			j=0;
			i++;
		}
		if(i<SIZE.rows){
			console.log('i:',i,',j:',j);
			letsRollOut(i,j);
			j++;
		}else{ 
			clearInterval(timer);
		}
	}

	var answerIt = function(answer){
		alert(answer)
		$("#result").innerText = answer||0;
	}

	var initProgram = function(){ 
		var outBox = document.createElement("div");
		outBox.id = "outbox";
		outBox.style.height = (SIZE.rows*PX)+"px";
		outBox.style.width = (SIZE.cols*PX)+"px";
		cover = document.createElement("div");
		cover.id = "current"; 
		document.body.appendChild(outBox);

		for (var i = 0; i < SIZE.rows; i++) {
			var data = [];
			var div = [];
			for (var j = 0; j < SIZE.cols; j++) {
				var rangColor = Math.ceil(Math.random()*4);
				var newNode = document.createElement("div");
				newNode.className = classNames[rangColor];	
				newNode.style.top = (i*PX)+"px";
				newNode.style.left = (j*PX)+"px";
				newNode.innerText = classNames[rangColor];
				document.getElementById("outbox").appendChild(newNode);
				document.getElementById("outbox").appendChild(cover);
				var wordbtn = {
					id:'row_'+i+'col_'+j,
					text:classNames[rangColor],
					curr:false,
				};//each colortext btn

				data.push(wordbtn);//push col
				div.push(newNode);//push col
			}

			datas.push(data);//push row
			divs.push(div);//push row
		} 

		// console.log("datas:",datas);
		// console.log("divs:",divs);
	}

	/**
	 * create the answer button
	 * @return {[type]} [description]
	 */
	var initAnswers = function(){
		var Answers = document.createElement("div");
		Answers.id = "answers";
		Answers.style.top = (SIZE.rows*PX+PX/2)+"px"; 
		Answers.style.height = PX/2+"px";
		Answers.style.width = SIZE.cols*PX+"px";
		document.getElementById("outbox").appendChild(Answers);
		for (var i = 1; i <= SIZE.cols; i++) {
			var btnNode = document.createElement("button");
			btnNode.id = "Btn_"+classNames[i];
			btnNode.innerText = classNames[i];
			btnNode.style.background = classNames[i];
			btnNode.style.height = PX/2+"px";
			btnNode.style.width = PX+"px";
			btnNode.setAttribute("onclick","answerIt('"+classNames[i]+"')")
			document.getElementById("answers").appendChild(btnNode);
		}
	}

	initProgram(); 
	initAnswers();

	// $("#Btn_red").bind("click",answerIt('red'))
	timer = setInterval(letsDivRun,600);
})